<template>
  <div class="mybox">
    <div class="top_box">
      <div class="item_box">
        <div class="title">{{ onebox.field_name }}</div>
        <div class="btm_value">
          <div class="value">{{ onebox.field_value }}</div>
          <div class="unit">{{ onebox.unit }}</div>
        </div>
      </div>
      <div class="item_box">
        <div class="title">{{ twobox.field_name }}</div>
        <div class="btm_value">
          <div class="value">{{ twobox.field_value }}</div>
          <div class="unit">{{ twobox.unit }}</div>
        </div>
      </div>
      <div class="item_box">
        <div class="title">{{ threebox.field_name }}</div>
        <div class="btm_value">
          <div class="value">{{ threebox.field_value }}</div>
          <div class="unit">{{ threebox.unit }}</div>
        </div>
      </div>
    </div>
    <div class="common-tab-box">
      <div @click="change('row1left')" :class="{ 'active': activeName === 'row1left' }">学校资源情况</div>
      <div @click="change('row1right')" :class="{ 'active': activeName === 'row1right' }">学校师生情况</div>
    </div>
    <KeepAlive>
      <component :is="componentId"></component>
    </KeepAlive>
  </div>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import row1left from './row1left.vue'
import row1right from './row1right.vue'
export default {
  name: '',
  data () {
    return {
      onebox: {},
      twobox: {},
      threebox: {},
      componentId: 'row1left',
      activeName: 'row1left'
    }
  },
  components: {
    row1left,
    row1right
  },
  mounted () {
    this.initData()
  },
  methods: {
    change (e) {
      this.activeName = e
      this.componentId = e
    },
    initData () {
      postAction('/topic/data/listAllData/dy_dp_msjc_whjy_gk', {}).then(res => {
        if (res.success) {
          this.onebox = res.result.data[0]
          this.twobox = res.result.data[1]
          this.threebox = res.result.data[2]
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mybox {
  .top_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .item_box {
      width: 132px;
      height: 53px;
      background: url('./img/11.png');

      .title {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 18px;
        color: #F1F1F1;
        text-align: center;
        margin-bottom: 4px;
      }

      .btm_value {
        display: flex;
        justify-content: center;

        .value {
          font-family: Microsoft YaHei UI;
          font-weight: bold;
          font-size: 20px;
          color: #FFDE00;
        }

        .unit {
          font-family: Microsoft YaHei UI;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          margin-top: 5px;
        }
      }
    }

    .box {
      width: 150px;
      height: 53px;
      background: url('./img/11.png')no-repeat center center;
      background-size: 100% 100%;
    }
  }

}
</style>
